<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="shortcut icon" href="#" />
    <link rel="stylesheet" type="text/css" href="{{pluResPath}}html/ledger/ledger.css" />
    <link rel="preload" href="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js" as="script" />
    <link rel="preload" href="{{resPath}}font/tttgbnumber.ttf" as="font">
</head>

<body id="container">
    <div class="container">
        <div class="title">
            <div class="uid">
                <div class="uid_item"><span class="uid_text">UID:</span><span class="uid_span">{{uid}}</span>
                </div>
                <div class="uid_item"><span class="day_span">开拓月历·{{day}}</span></div>
            </div>
        </div>
        <div class="title_date">
            <div class="icon">
                <img src="{{pluResPath}}img/role/{{icon}}" />
            </div>
            <div class="title_date_text">
                <div>{{nowDay}}</div>
                <div>{{srday}}</div>
            </div>
        </div>
        <div class="subject">
            <div class="subject_solid"><span style="width: {{bfStamina}};"></span></div>
            <div class="data-box">
                <div class="month">
                    <div class="head">当月获取：</div>
                    <div class="primogems">
                        <div class="icon-ys"></div>
                        <div class="text">星琼：{{month_data.current_hcoin}} | {{month_data.gacha}} 抽</div>
                    </div>
                    <div class="primogems">
                        <div class="icon-mola"></div>
                        <div class="text">专&通票：{{month_data.current_rails_pass}} 张</div>
                    </div>
                </div>
                <div class="day">
                    <div class="head">上月获取：</div>
                    <div class="primogems">
                        <div class="icon-ys"></div>
                        <div class="text">星琼：{{month_data.last_hcoin}} | {{month_data.last_gacha}} 抽</div>
                    </div>
                    <div class="primogems">
                        <div class="icon-mola"></div>
                        <div class="text">专&通票：{{month_data.last_rails_pass}} 张</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="title_wt">
            <div>
                星琼收入统计
            </div>
        </div>
        <div class="chart-box">
            <div class="chart-info">
                <div id="chartContainer"></div>
                <ul class="tooltip">
                    {{each month_data.group_by val}}
                    <li>
                        <i style="background: {{val.color}}"></i>
                        <span class="action"><em>{{val.action_name}}</em></span> <span
                            class="num"><em>{{val.num}}</em></span><span
                            class="percent"><em>{{val.percent}}%</em></span>
                    </li>
                    {{/each}}
                </ul>
            </div>
        </div>
        <div class="logo"> Created By Miao-Yunzai</div>
    </div>
    </div>
    </div>
</body>

<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
<script>
    const { Pie } = G2Plot;
    const data = JSON.parse(`{{@ group_by}}`);
    const piePlot = new Pie("chartContainer", {
        renderer: "svg",
        animation: false,
        data: data,
        appendPadding: 10,
        angleField: "num",
        colorField: "action_name",
        radius: 1,
        innerRadius: 0.7,
        color: JSON.parse(`{{@ color}}`),
        meta: {
            // num: {
            //   formatter: (v) => `${v}`,
            // },
        },
        label: {
            type: "inner",
            offset: "-50%",
            autoRotate: false,
            style: {
                textAlign: "center",
                fontFamily: "tttgbnumber",
                "fontSize": 24,
            },
            formatter: ({ percent }) => {
                percent = (percent * 100).toFixed(0);
                return percent > 2 ? `${percent}%` : "";
            },
        },
        statistic: {
            title: {
                offsetY: -18,
                content: "总计",
                style: {
                    fontFamily: "tttgbnumber",
                    "fontSize": 32,
                },
            },
            content: {
                offsetY: -10,
                style: {
                    fontFamily: "tttgbnumber",
                    "fontSize": 48,
                },
            },
        },
        legend: false,
    });
    piePlot.render();
</script>

</html>